<template>
    <div class="wrapper-recommend">
        <p class="recommend">热销推荐</p>
        <ul>
            <li v-for="(item,index) in recommendList" :key="index">
                <div class="imgs">
                    <img :src="item.imgUrl" style="width:100%;height:100%"/>
                </div>
                <div class="title">
                    <h3>{{item.title}}</h3>
                    <p>{{item.desc}}</p>
                    <button @click="go(item.id)">查看详情</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
  props: {
    recommendList: Array
  },
  methods:{
    go(id){
      this.$router.push('/detail/'+id)
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-recommend {
  width: 100%;
  margin-top: 0.5rem;
  .recommend {
    width: 100%;
    height: 0.7rem;
    background: #ccc;
    line-height: 0.7rem;
    font-size: .3rem;
    padding-left: .1rem;
  }
  ul {
    list-style: none;
    li {
      width: 100%;
      height: 2.3rem;
      padding: 0.1rem;
      display: flex;
      .imgs {
        width: 2.3rem;
        height: 100%;
        background: white;
        float: left;
      }
      .title {
        flex: 1;
        height: 100%;
        background: white;
        margin-left: 0.1rem;
        h3 {
          width: 100%;
          height: 0.5rem;
          font-size: 0.5rem;
          padding: 0.1rem;
        }
        p {
          width: 4.8rem;
          
          height: 0.4rem;
          font-size: 0.4rem;
          color: #aaa;
          padding: 0.1rem;
          white-space:nowrap;
          overflow:hidden;
          text-overflow:ellipsis;
          
        }
        button {
          padding: 0.1rem;
          background: orange;
          font-size: 0.2rem;
          color: white;
          margin-top: 0.1rem;
          border-radius: 0.1rem;
        }
      }
    }
  }
}
</style>